<template>
	<view class="" style="background-color: #FFFFFF;height: 100vh;">
		<view class="container">
			<view class="nav-box" :style="{'height':'30vh'}">
				<!-- 自定义导航栏 -->
				<view class="status_bar" :style="{'height':statusBarHeight+'px'}">
					<!-- uni-ui这里是状态栏 -->
				</view>
				<!-- 胶囊位置信息 -->
				<view class="nav-main flex align-center justify-center" :style="{height: navBarHeight+'px'}">
					<view class="nav-main-back" @click="goBack">
						<uni-icons type="back" size="26" color="#2c2c2c"></uni-icons>
					</view>
					<text class="nav-main-title">推荐有分红</text>
				</view>
			</view>
			<view class="content">
				<view class="title">
					<span>用户</span>
					<span>收益</span>
				</view>
				<view class="income-list" v-for="(item,index) in data" :key="item.id">
					<image :src="$wanlshop.oss(item.avatar)" mode="widthFix" style="width: 72rpx;height: 72rpx;border-radius: 50%;"></image>
					<view class="income-content">
						<span class="name">{{ item.username }}</span>
						<span class="money">{{ item.revenue || '0.00' }}</span>
					</view>
				</view>
			</view>
		</view>
		<!-- 底部提示 -->
		<uni-load-more :status="status" :content-text="contentText" @clickLoadMore="lowerBottom" />
	</view>
</template>

<script>
	import { mapState } from 'vuex';
	export default {
		data() {
			return {
				//总高度
				height: 0,
				//胶囊位置信息
				menuButtonRect: {},
				//状态栏的高度
				statusBarHeight: 0,
				//导航栏的高度
				navBarHeight: 0,
				data: [
				],
				status: 'more',
				contentText: {
					contentdown: '点击或上拉加载更多',
					contentrefresh: '疯狂加载中...',
					contentnomore: '没有更多了'
				},
			}
		},
		computed: {
		  ...mapState(['user', 'statistics','common'])
		},
		mounted() {
			this.getData()
		},
		onReachBottom() {
			this.lowerBottom()
		},
		created() {
			this.getHeight();
		},
		methods: {
			//获取屏幕导航栏高度
			getHeight() {
				if (wx.canIUse('getMenuButtonBoundingClientRect')) {
					let sysInfo = wx.getSystemInfoSync(); //状态栏的高度
					this.statusBarHeight = sysInfo.statusBarHeight;
					// 胶囊位置信息
					let rect = wx.getMenuButtonBoundingClientRect();
					this.menuButtonRect = JSON.parse(JSON.stringify(rect));
					// 导航栏高度
					let navBarHeight = (rect.top - sysInfo.statusBarHeight) * 2 + rect.height;
					this.navBarHeight = navBarHeight;
					// 自定义导航栏的高度
					this.height = sysInfo.statusBarHeight + navBarHeight;
				} else {
					wx.showToast({
						title: '您的微信版本过低，界面可能会显示不正常',
						icon: 'none',
						duration: 4000
					});
				}
			},
			goBack() {
				uni.navigateBack();
			},
			//上拉加载
			lowerBottom(){
				console.log(999999999);
				if (this.status == 'noMore') {
					return;
				}
				this.current_page++;
				this.status = "loading"
				this.getData();
			},
			async getData(){
				const that = this
				await uni.request({
					url: '/income/income/user',
					method: 'GET',
					data:{
						user_id:that.user.id
					},
					success: res => {
					
						if (that.current_page === 1) {
							that.data = res.data.data;
						} else {
							that.data = that.data.concat(res.data.data);
						}
						that.current_page = res.data.current_page; //当前页码
						that.last_page = res.data.last_page; //总页码
						// 判断是否还有更多数据
						console.log(that.current_page < that.last_page);
						if (that.current_page < that.last_page) {
							that.status = 'more'; // 没有更多数据
						} else {
							that.status = 'noMore'; // 还有更多数据
						}
				
					}
				});
			}
		}
	}
</script>

<style lang="scss" scoped>
	.status_bar {
		width: 100%;
		
	}
	.nav-box{
		background-image: url('https://cdn.enjoysix.com/uploads/20231023/tuijian.png');
	}
	.nav-main {
		position: relative;
		.nav-main-back {
			position: absolute;
			left: 10rpx;
		}

		.nav-main-title {
			font-size: 32rpx;
			font-family: PingFangSC-Medium, PingFang SC;
			font-weight: 500;
			color: #333B53;
			line-height: 44rpx;
		}
	}
	.container{
		position: relative;
		.content{
			width: 100%;
			position: absolute;
			top: 240rpx;
			padding: 0 36rpx 0;
			// background-color: #ffffff;
			.title{
				display: flex;
				justify-content: space-between;
				span{
					font-size: 24rpx;
					font-family: PingFangSC-Regular, PingFang SC;
					font-weight: 400;
					color: #B1B1B1;
					line-height: 34rpx;
				}
			}
		}
	}
	.income-list{
		margin-top: 38rpx;
		height: 111rpx;
		display: flex;
		    justify-content: space-between;
			align-items: center;
			border-bottom: 1rpx solid #B1B1B1;
			padding-bottom: 36rpx;
		.income-content{
			    display: flex;
			    align-items: center;
			    justify-content: space-between;
				width: 87%;
			.name{
				font-size: 28rpx;
				font-family: PingFangSC-Regular, PingFang SC;
				font-weight: 400;
				color: #1C1C1C;
				line-height: 40rpx;
		
			}
			.money{
				font-size: 28rpx;
				font-family: DINAlternate-Bold, DINAlternate;
				font-weight: bold;
				color: #E25740;
				line-height: 32rpx;
			}
		}
	}
</style>